---
title: Frontend Actions
icon: "lucide/Wrench"
description: Create frontend actions and use them within your CrewAI Flows agent.
---

import InstallSDKSnippet from "@/snippets/install-python-sdk-crew.mdx";


## Implementation

<Callout>
Check out the [Frontend Actions overview](/frontend-actions) to understand what they are and when to use them.
</Callout>

<Steps>
    <Step>
        ### Setup CopilotKit

        To use frontend actions, you'll need to setup CopilotKit first. For the sake of brevity, we won't cover it here.

        Check out our [getting started guide](/crewai-flows/quickstart/crewai/crewai-flows) and come back here when you're setup!
    </Step>

    <Step>
        ### Create a frontend action

        First, you'll need to create a frontend action using the [useCopilotAction](/reference/hooks/useCopilotAction) hook. Here's a simple one to get you started
        that says hello to the user.

        ```tsx title="page.tsx"
        import { useCopilotAction } from "@copilotkit/react-core" // [!code highlight]

        export function Page() {
          // ...

          // [!code highlight:16]
          useCopilotAction({
            name: "sayHello",
            description: "Say hello to the user",
            available: "remote", // optional, makes it so the action is *only* available to the agent
            parameters: [
              {
                name: "name",
                type: "string",
                description: "The name of the user to say hello to",
                required: true,
              },
            ],
            handler: async ({ name }) => {
              alert(`Hello, ${name}!`);
            },
          });

          // ...
        }
        ```
    </Step>
    <Step>
        ### Install the CopilotKit SDK
        
        Now, we'll need to modify the agent to access these frontend tools. In your terminal, navigate to your agent's folder and continue from there!

        <InstallSDKSnippet components={props.components}/>
    </Step>
    <Step>
        ### Inheriting from CopilotKitState

        To access the frontend actions provided by CopilotKit, you can inherit from CopilotKitState in your agent's state definition:

        <Tabs groupId="language_crewai-flows_agent" items={['Python']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                from copilotkit import CopilotKitState # [!code highlight]

                class YourAgentState(CopilotKitState): # [!code highlight]
                    your_additional_properties: str
                ```
            </Tab>
        </Tabs>

        By doing this, your agent's state will include the `copilotkit` property, which contains the frontend actions that can be accessed and invoked.
    </Step>
    <Step>
        ### Accessing Frontend Actions

        Once your agent's state includes the `copilotkit` property, you can access the frontend actions and utilize them within your agent's logic.

        Here's how you can call a frontend action from your agent:

        <Tabs groupId="language_crewai-flows_agent" items={['Python']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                async def agent(self):
                    response = await copilotkit_stream(
                        completion(
                            model="openai/gpt-4o",
                            messages=[
                                {"role": "system", "content": prompt},
                                *self.state.get("messages", [])
                            ],
                            # Access the actions from the copilotkit property
                            tools=self.state["copilotkit"]["actions"], # [!code highlight]
                            tool_choice="required",
                            stream=True
                        )
                    )

                    # ...
                ```
            </Tab>
        </Tabs>

        These actions are automatically populated by CopilotKit and are compatible with LiteLLM's tool call definitions, making it straightforward to integrate them into your agent's workflow.
    </Step>
    <Step>
        ### Give it a try!
        You've now given your agent the ability to directly call any CopilotActions you've defined. These actions will be available as tools to the agent where they can be used as needed.
    </Step>

</Steps>
